<template>
  <div class="big_box">
    <div class="searchBox">
      <van-search
        v-model="searchVal"
        style="flex: 1 !important"
        input-align="left"
        placeholder="请输入你想搜索的企业"
        class="search_Input_box"
        background="transparent"
        @search="onSearch"
        @clear="clearSearch"
      />
      <div class="saerch_text" @click="onSearch">搜索</div>
    </div>
    <div class="seg_line"></div>
    <div class="search_result">
      <div class="head" v-show="total">
        共发现 <span class="total_num">{{ total }}</span> 家企业
      </div>
      <van-list
        class="company_box"
        @load="onLoad"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        v-if="listShow"
      >
        <corpList :originList="originList"></corpList>
      </van-list>
    </div>
  </div>
</template>

<script>
import corpList from "../../components/lookAround/corpList.vue";
import { Toast, Dialog } from "vant";
import { lookAroundV2, fullAmountCorp } from "@/interfaces/lookAround/index.js";
export default {
  components: {
    corpList,
  },
  data() {
    return {
      searchVal: "",
      originList: [],
      pageSize: 5,
      pageNum: 1,
      total: "",
      loading: false,
      finished: false,
      listShow: false,
    };
  },
  created() {
    this.originList = [];
  },
  methods: {
    // 搜索
    onSearch() {
      if (this.searchVal) {
        this.listShow = true;
        this.originInfo();
        this.getList();
      } else {
        Toast("请输入企业名称");
      }
    },
    // 清空按钮
    clearSearch() {
      console.log("aaa");
      this.searchVal = "";
    },
    // 获取列表
    async getList() {
      console.log(this.searchVal, "11");
      this.loading = true;
      this.finished = false;
      this.total = "";
      let params = {
        pageBO: {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
        },
        searchParam: this.searchVal,
      };
      console.log(params, "条件");

      const res = await fullAmountCorp({ ...params });
      console.log(this.pageNum, res.data.pages, "对比");
      let { list, total } = res.data;
      if (this.pageNum <= res.data.pages) {
        console.log(res, "res");

        console.log(total, "totaltotal");
        this.total = total;
        // ==========================================
        // 设置不同的标题背景色
        for (let i in list) {
          let color = "#D99D9A";
          if (i % 4 === 0) {
            color = "#8BCBB8";
          } else if (i % 3 === 0) {
            color = "#99C1F2";
          } else if (i % 5 === 0) {
            color = "#B8AAD6";
          } else {
            color = "#D99D9A";
          }
          this.$set(list[i], "background", color);
        }
        console.log(list, "listlist");
        // =======================================================
        this.originList = this.originList.concat(list);
        console.log(this.originList, "this.originList");

        this.loading = false;
      } else {
        this.total = total;
        console.log(this.total, "总数");
        this.finished = true;
      }
    },
    onLoad() {
      this.pageNum = this.pageNum + 1;
      console.log("出发了");
      if (this.searchVal) {
        this.getList();
      }
    },
    originInfo() {
      this.pageNum = 1;
      this.originList = [];
    },
  },
};
</script>

<style scoped lang="scss">
.big_box {
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
}
.searchBox {
  width: 92%;
  position: fixed;
  top: 3px;
  z-index: 99;
  display: flex;
}
::v-deep .van-icon-clear {
  display: none !important;
}
.van-search__content {
  background-color: #f7f8fa;
  border-radius: 7px;
}
.saerch_text {
  line-height: 54px;
  font-size: 15px;
}
.seg_line {
  width: 100%;
  height: 7px;
  margin-top: 60px;
  background-color: #f3f3f3;
}
.search_result {
  flex: 1;
  width: 100%;
  //   background-color: aqua;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.head {
  font-size: 17px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  padding-left: 10px;
  border-bottom: 3px solid #f3f3f3;
}
.total_num {
  color: #ec6c67;
}
.company_box {
  width: 100%;
  flex: 1;
  //   background-color: pink;
  overflow: auto;
}
</style>